<template>
	<!-- 头部 -->
	<header class="df df-ai-center pl-l pr-l">
		<div class="logo">
			<img src="./assets/img/image2.png" class="mr-s" alt="" /> logo名
		</div>
		<div class="right df df-ai-center">
			<div class="tencent mr-l">公众号入口</div>
			<div class="collection">收藏</div>
		</div>
	</header>
	<!-- 轮播图 -->
	<div class="swiper ml-m mr-m">
		<img src="./assets/img/swiper@3x.png" alt="" />
		<ul class="circle df">
			<li class="actived"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<!-- 主体 -->
	<main>
		<!-- 选择的栏目 -->
		<ul class="directory df">
			<li class="selected"><a href="/">数字藏品</a></li>
			<li><a href="/">发售日历</a></li>
		</ul>
		<!-- 精品 -->
		<div class="boutique-list">
			<div class="boutique-item mb-m">
				<img
					class="boutique-item-img"
					src="./assets/img/boutique2@3x.png"
					alt=""
				/>
				<div class="snap-up icon1">即将开售 10:25:53</div>
				<div class="boutique-info bg1 df">
					<div class="info">
						<div class="title">HumanLG on deviantART</div>
						<div class="company df df-ai-center mt-m">
							<img
								class="company-portraits mr-s"
								src="./assets/img/via2@3x.png"
							/><span>天下我有科技有限公司</span>
						</div>
					</div>
					<div class="limited-price">
						<div class="limited df df-ai-center">
							<span>限量</span>
							<div class="share">688份</div>
						</div>
						<div class="price">￥<span>38.00</span></div>
					</div>
				</div>
			</div>
			<div class="boutique-item mb-m">
				<img
					class="boutique-item-img"
					src="./assets/img/boutique1@3x.png"
					alt=""
				/>
				<div class="snap-up icon2">抢购中</div>
				<div class="boutique-info bg2 df">
					<div class="info">
						<div class="title">HumanLG on deviantART</div>
						<div class="company df df-ai-center mt-m">
							<img
								class="company-portraits mr-s"
								src="./assets/img/via@3x.png"
							/><span>天下我有科技有限公司</span>
						</div>
					</div>
					<div class="limited-price">
						<div class="limited df df-ai-center">
							<span>限量</span>
							<div class="share">688份</div>
						</div>
						<div class="price">￥<span>38.00</span></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 准时 -->
		<div class="punctuality">
			<div class="date">
				<div class="date-time">04月28日</div>
				<div class="line"></div>
			</div>
			<div class="punctuality-list">
				<div class="punctuality-item">
					<div class="punctuality-item-time">12:00</div>
					<div class="punctuality-item-good">
						<div class="punctuality-item-good-img">
							<img src="./assets/img/image.png" alt="" />
						</div>
						<div class="punctuality-item-good-content ml-m">
							<div class="punctuality-item-good-title">
								敦煌敦煌壁画·鹿神
							</div>
							<div class="limited-price">
								<div class="limited df df-ai-center mt-s mb-s">
									<span>限量</span>
									<div class="share">688份</div>
								</div>
								<div class="price">￥<span>38.00</span></div>
							</div>
						</div>
					</div>
				</div>
				<div class="punctuality-item">
					<div class="punctuality-item-time">12:00</div>
					<div class="punctuality-item-good">
						<div class="punctuality-item-good-img">
							<img src="./assets/img/image2.png" alt="" />
						</div>
						<div class="punctuality-item-good-content ml-m">
							<div class="punctuality-item-good-title">
								敦煌敦煌壁画·鹿神
							</div>
							<div class="limited-price">
								<div class="limited df df-ai-center mt-s mb-s">
									<span>限量</span>
									<div class="share">688份</div>
								</div>
								<div class="price">￥<span>38.00</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
	<!-- 底部 -->
	<footer class="df">
		<div class="actived-font">
			<i class="iconfont icon-home2"></i>
			<span>首页</span>
		</div>
		<div>
			<i class="iconfont icon-my"></i>
			<span>我的</span>
		</div>
	</footer>
</template>

<script>
export default {
	name: 'App',
};
</script>

<style>
body {
	background: #0e1017;
}
li {
	list-style-type: none;
}
a {
	text-decoration: none;
}
header {
	height: 1.1733rem;
	color: #fff;
	font-size: 0.48rem;
	justify-content: space-between;
}
header .logo {
	display: flex;
	height: 0.8267rem;
	align-items: center;
}
header .logo img {
	width: 0.6133rem;
}
header .tencent {
	width: 2.6667rem;
	height: 0.7467rem;
	font-size: 0.3733rem;
	text-align: center;
	line-height: 0.7467rem;
	border-radius: 0.5333rem;
	background: rgba(235, 235, 235, 0.3);
}
header .collection {
	font-size: 0.3733rem;
}
.swiper {
	position: relative;
	height: 3.4667rem;
	margin-top: 0.4267rem;
	border-radius: 0.2667rem;
	overflow: hidden;
}
.swiper img {
	width: 100%;
}
.swiper .circle {
	position: absolute;
	bottom: 0.2667rem;
	left: 50%;
	transform: translateX(-50%);
}
.swiper .circle li {
	width: 0.16rem;
	height: 0.16rem;
	border-radius: 50%;
	margin: 0 0.0533rem;
	background: rgba(255, 255, 255, 0.8);
}
main {
	margin: 0 0.2667rem 2.5867rem 0.2667rem;
	/* 限量 */
}
main .directory {
	margin: 0.5867rem 0 0.56rem;
	justify-content: space-around;
}
main .directory li {
	position: relative;
}
main .directory li a {
	font-size: 0.5333rem;
	color: rgba(255, 255, 255, 0.8);
}
main .boutique-list .boutique-item {
	position: relative;
	height: 11.2rem;
	border-radius: 0.2667rem;
	overflow: hidden;
}
main .boutique-list .boutique-item .boutique-item-img {
	width: 100%;
}
main .boutique-list .boutique-item .snap-up {
	position: absolute;
	top: 0.32rem;
	left: 0.3733rem;
	font-size: 0.32rem;
	text-align: right;
	padding: 0 0.1867rem 0 0.3rem;
	border-radius: 0.5333rem;
	color: rgba(255, 255, 255, 0.8);
	background: linear-gradient(90deg, #575757 0%, #383838 100%);
}
main .boutique-list .boutique-item .icon2::before {
	font-family: 'iconfont' !important;
	margin-right: 0.1067rem;
	content: '\e8b6';
}
main .boutique-list .boutique-item .icon1::before {
	font-family: 'iconfont' !important;
	margin-right: 0.1067rem;
	content: '\e735';
}
main .boutique-list .boutique-item .boutique-info {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2.4533rem;
	padding: 0.3733rem 0.4267rem;
	border-radius: 0.2667rem;
	width: 100%;
	justify-content: space-between;
}
main .boutique-list .boutique-item .boutique-info .info .title {
	font-size: 0.4267rem;
	color: #fff;
}
main .boutique-list .boutique-item .boutique-info .info .company {
	font-size: 0.32rem;
	color: rgba(255, 255, 255, 0.5);
}
main
	.boutique-list
	.boutique-item
	.boutique-info
	.info
	.company
	.company-portraits {
	width: 0.6933rem;
	height: 0.6933rem;
	border-radius: 50%;
	overflow: hidden;
}
main .boutique-list .boutique-item .boutique-info .limited-price {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
main .boutique-list .boutique-item .boutique-info .limited-price .limited {
	font-size: 0.2933rem;
	color: rgba(235, 235, 235, 0.8);
	background: rgba(0, 0, 0, 0.5);
}
main .boutique-list .boutique-item .boutique-info .limited-price .limited span {
	padding: 0.0267rem 0.1333rem;
	text-align: center;
	color: #fff;
	display: inline-block;
	background: linear-gradient(135deg, #2072f5 0%, #9f02fa 100%);
}
main
	.boutique-list
	.boutique-item
	.boutique-info
	.limited-price
	.limited
	.share {
	flex: 1;
	text-align: center;
}
main .boutique-list .boutique-item .boutique-info .limited-price .price {
	color: #fff;
	font-size: 0.48rem;
}
main .boutique-list .boutique-item .boutique-info .limited-price .price span {
	font-size: 0.6933rem;
}
main .boutique-list .boutique-item .bg1 {
	background: linear-gradient(90deg, #e36143 0%, #8a1c15 100%);
}
main .boutique-list .boutique-item .bg2 {
	background: linear-gradient(90deg, #324e73 0%, #342d61 100%);
}
main .limited-price {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
main .limited-price .limited {
	width: 2.08rem;
	font-size: 0.2933rem;
	color: rgba(235, 235, 235, 0.8);
	background: rgba(0, 0, 0, 0.5);
}
main .limited-price .limited span {
	padding: 0.0267rem 0.1333rem;
	text-align: center;
	color: #fff;
	display: inline-block;
	background: linear-gradient(135deg, #2072f5 0%, #9f02fa 100%);
}
main .limited-price .limited .share {
	flex: 1;
	text-align: center;
}
main .limited-price .price {
	color: #fff;
	font-size: 0.48rem;
}
main .limited-price .price span {
	font-size: 0.6933rem;
}
main .punctuality .date {
	display: flex;
	align-items: center;
	margin-bottom: 1.0133rem;
}
main .punctuality .date .date-time {
	width: 3.1333rem;
	color: rgba(255, 255, 255, 0.5);
}
main .punctuality .date .line {
	flex: 1;
	height: 0.0267rem;
	background-color: rgba(255, 255, 255, 0.5);
}
main .punctuality-list .punctuality-item {
	position: relative;
	height: 3.2rem;
	margin-bottom: 1.2267rem;
}
main .punctuality-list .punctuality-item .punctuality-item-time {
	position: absolute;
	color: #fff;
	width: 2.4267rem;
	height: 0.6933rem;
	top: -0.6933rem;
	left: 50%;
	line-height: 0.6933rem;
	text-align: center;
	transform: translateX(-50%);
	background-image: url(./assets/img/矩形6@3x.png);
	background-size: cover;
}
main .punctuality-list .punctuality-item .punctuality-item-good {
	display: flex;
}
main
	.punctuality-list
	.punctuality-item
	.punctuality-item-good
	.punctuality-item-good-img {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 0.2667rem;
	overflow: hidden;
}
main
	.punctuality-list
	.punctuality-item
	.punctuality-item-good
	.punctuality-item-good-img
	img {
	width: 100%;
}
main
	.punctuality-list
	.punctuality-item
	.punctuality-item-good
	.punctuality-item-good-content {
	flex: 1;
	padding: 0.3467rem 0 0.2933rem;
}
main
	.punctuality-list
	.punctuality-item
	.punctuality-item-good
	.punctuality-item-good-content
	.punctuality-item-good-title {
	color: #fff;
}
footer {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 2.1867rem;
	font-size: 0.2667rem;
	align-items: center;
	color: rgba(156, 156, 156);
	background: #222326;
	justify-content: space-around;
}
footer div {
	display: flex;
	flex-direction: column;
	align-items: center;
}
footer div i {
	display: inline-block;
	font-size: 0.64rem !important;
	color: #fff;
}
footer .actived-font,
footer .actived-font > i {
	color: #2072f5 !important;
}
.selected a {
	color: #2072f5 !important;
}
.selected::after {
	content: '';
	position: absolute;
	bottom: -0.2667rem;
	left: 50%;
	width: 0.64rem;
	height: 0.1067rem;
	border-radius: 0.1333rem;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #2072f5 0%, #9f02fa 100%);
}
.actived {
	width: 0.32rem !important;
	background: #fff !important;
	border-radius: 0.1333rem !important;
}
</style>
